<template>
  <ModuleTitle title="线上人群占比">
    <div class="w-full h-full flex justify-between items-center px-4 mt-2">
      <!-- 家庭 -->
      <div class="flex flex-col items-center w-30%">
        <div class="relative w-120px h-120px">
          <div class="absolute inset-0 flex flex-col items-center justify-center">
            <span class="text-20px font-bold text-[#fff]">{{ family.percentage }}%</span>
            <span class="text-14px text-[#739DC2]">{{ family.count }}万</span>
          </div>
          <svg class="w-full h-full" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="45" fill="none" stroke="#386479" stroke-width="8" />
            <circle
              cx="50"
              cy="50"
              r="45"
              fill="none"
              :stroke="family.color"
              stroke-width="8"
              stroke-linecap="round"
              :stroke-dasharray="`${family.percentage * 2.83}, 283`"
              transform="rotate(-90 50 50)" />
          </svg>
        </div>
        <span class="text-16px text-[#fff] mt-2">家庭</span>
      </div>

      <!-- 学校 -->
      <div class="flex flex-col items-center w-30%">
        <div class="relative w-120px h-120px">
          <div class="absolute inset-0 flex flex-col items-center justify-center">
            <span class="text-20px font-bold text-[#fff]">{{ school.percentage }}%</span>
            <span class="text-14px text-[#739DC2]">{{ school.count }}万</span>
          </div>
          <svg class="w-full h-full" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="45" fill="none" stroke="#386479" stroke-width="8" />
            <circle
              cx="50"
              cy="50"
              r="45"
              fill="none"
              :stroke="school.color"
              stroke-width="8"
              stroke-linecap="round"
              :stroke-dasharray="`${school.percentage * 2.83}, 283`"
              transform="rotate(-90 50 50)" />
          </svg>
        </div>
        <span class="text-16px text-[#fff] mt-2">学校</span>
      </div>

      <!-- 单位 -->
      <div class="flex flex-col items-center w-30%">
        <div class="relative w-120px h-120px">
          <div class="absolute inset-0 flex flex-col items-center justify-center">
            <span class="text-20px font-bold text-[#fff]">{{ company.percentage }}%</span>
            <span class="text-14px text-[#739DC2]">{{ company.count }}万</span>
          </div>
          <svg class="w-full h-full" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="45" fill="none" stroke="#386479" stroke-width="8" />
            <circle
              cx="50"
              cy="50"
              r="45"
              fill="none"
              :stroke="company.color"
              stroke-width="8"
              stroke-linecap="round"
              :stroke-dasharray="`${company.percentage * 2.83}, 283`"
              transform="rotate(-90 50 50)" />
          </svg>
        </div>
        <span class="text-16px text-[#fff] mt-2">单位</span>
      </div>
    </div>
  </ModuleTitle>
</template>

<script setup>

import ModuleTitle from './ModuleTitle.vue'
import { useAutoRefresh } from '@/hooks/useAutoRefresh'

useAutoRefresh(fetchData)

const family = ref({
  percentage: 45,
  count: 323.48,
  color: '#11E48A'
})

const school = ref({
  percentage: 40,
  count: 313.32,
  color: '#1AC9FF'
})

const company = ref({
  percentage: 25,
  count: 170.45,
  color: '#FFBF2F'
})



// 组件自己的数据获取方法
function fetchData() {
  console.log('执行组件数据刷新')
  // 这里调用API获取数据
}
</script>

<style scoped>
/* 不需要额外样式，全部使用unocss */
</style>
